<template>
  <div>
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="文章标题">
        <el-input v-model="form.title" style="width:40%"></el-input>
      </el-form-item>
      <el-form-item label="文章主题">
        <el-select v-model="form.project" placeholder="请选择文章主题">
          <el-option v-for="item in project" :key="item.name" :label="item.name" :value="item.name"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="发布时间">
        <el-col :span="11">
          <el-date-picker type="date" placeholder="选择日期" v-model="form.date" style="width: 50%;"></el-date-picker>
        </el-col>
      </el-form-item>
      <el-form-item label="文章标签">
        <el-checkbox-group v-model="checkType">
          <el-checkbox v-for="(item,idx) in type" :key="idx" :label="item.name" name="type"></el-checkbox>
        </el-checkbox-group>
      </el-form-item>
        <mavon-editor v-model="form.content" :ishljs = "true" @htmlCode="htmlCode"/>
        <br><br><br><br>
        <el-button type="primary" @click="onSubmit">立即创建</el-button>
        <el-button>取消</el-button>
    </el-form>
  </div>
</template>

<script>
export default {
  props: {
    type: {
      type: Array,
      default: function () {
        return []
      }
    },
    project: {
      type: Array,
      default: function () {
        return []
      }
    },
    form: {
      type: Object,
      default: function () {
        let obj = {
          title: '',
          project: '',
          date: '',
          type: [],
          content: '',
          author: ''
        }
        return obj
      }
    }
  },
  data () {
    return {
      checkType: []
    }
  },
  methods: {
    onSubmit () {
      this.form.type = this.checkType
      this.$emit('onsubmit', this.form)
    },
    htmlCode (status, value) {
      console.log(status)
      console.log(value)
    }
  },
  watch: {
    form () {
      console.log(this.form)
    }
  }
}
</script>
